<!--
 * @Author: zl
 * @Date: 2021-01-11 11:14:26
 * @LastEditTime: 2021-12-02 17:02:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\Login.vue
-->
<template>
    <common>
        <div class="ve_container">
            <el-card :body-style="{ background: 'rgba(0,0,0,0.15)' }">
                <h1>管理系统</h1>
                <transition name="el-fade-in-linear">
                    <el-form
                        :model="form"
                        :rules="rules"
                        v-show="!success"
                        class="ve_form"
                        ref="ref_form"
                        :inline="false"
                        @keyup.enter="onSubmit"
                    >
                        <el-form-item prop="username">
                            <el-input
                                v-model.trim="username"
                                placeholder="用户名"
                            >
                                <template #prepend>
                                    <el-icon :size="20"><Avatar /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                v-model.trim="password"
                                show-password
                                placeholder="密码"
                            >
                                <template #prepend>
                                    <el-icon :size="20"><Key /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input
                                v-model.trim="code"
                                placeholder="验证码"
                                style="width: 70%"
                            >
                                <template #prepend>
                                    <el-icon :size="20"><Key /></el-icon>
                                </template>
                            </el-input>
                            <img
                                style="
                                    height: 36px;
                                    margin-left: 2%;
                                    cursor: pointer;
                                "
                                @click="createCode"
                                :src="yzms"
                            />
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                class="ve_submit"
                                type="primary"
                                @click="onSubmit"
                            >
                                登录
                            </el-button>
                            <!-- <el-button class="ve_user">注册</el-button>
                           <el-span
                               class="ve_user"
                               style="
                                   color: #1c6ca1;
                                   padding-left: 5%;
                                   cursor: pointer;
                               "
                               >忘记密码?</el-span
                           >-->
                        </el-form-item>
                    </el-form>
                </transition>
            </el-card>
        </div>
    </common>
</template>

<script setup>
// import UsersEdit from "./layoutpages/components/UsersEdit";
import { SET_TOKEN, SET_UNAMEID } from "@/store/modules/app/type";
import Common from "@/components/Common";
import { ref, reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { guid } from "@/utils";
const rules = {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
};
const store = useStore();
const router = useRouter();
const yzms = ref("");
const form = reactive({
    username: "",
    password: "",
    grantType: "password",
    code: "",
    uuid: "",
});
const { username, password, code } = toRefs(form);
const ref_form = ref(null);
const success = ref(false);
sessionStorage.clear();
store.dispatch(`app/${SET_TOKEN}`, "");
router.options.isAddDynamicMenuRoutes = false;

const onSubmit = () => {
    ref_form.value.validate(async (valid) => {
        if (valid) {
            form.uuid = sessionStorage.getItem("code");
            const data = await VE_API.system.login(form);
            if (data.code === "00") {
                const { access_token, userId } = data.data;
                store.dispatch(`app/${SET_TOKEN}`, access_token);
                store.dispatch(`app/${SET_UNAMEID}`, userId);
                // store.dispatch(`app/${SET_UNAME}`, uname);
                success.value = true;
                router.push({ name: "AppMain" });
            }
        } else {
            return;
        }
    });
};
const createCode = async () => {
    let uuid = sessionStorage.getItem("code");
    if (uuid == null) {
        uuid = guid();
        sessionStorage.setItem("code", uuid);
    }
    const data = await VE_API.system.queryCode({ uuid });
    yzms.value = data.data;
};
onMounted(async () => {
    await createCode();
});
</script>

<style lang="scss" scoped>
.ve_container {
    position: absolute;
    z-index: 1;
    width: 400px;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
    transition: all 1s;
    min-height: 273px;
    text-align: center;
    h1 {
        font-size: 24px;
        transition: all 1s;
        font-weight: bold;
        margin-bottom: 36px;
    }
    .ve_form {
        .ve_submit {
            width: 100%;
        }
        :deep(.el-input-group__prepend) {
            padding: 0 10px;
        }
    }
    .ve_user {
        margin-top: 5%;
    }
}
</style>
